<template>
  <!-- 信控信息 -->
  <div>
    <div style="margin-bottom: 8px">
      <div class="middle-box">
        <span class="title"> 信控信息 </span>
      </div>
      <div class="operate_btn">
        <span class="btn_left">
          <el-button
            type="primary"
            @click="newData"
            :loading="newLinkBtnLoading"
          >
            新增
          </el-button>
          <el-button @click="deleteData"> 删除 </el-button>
        </span>
        <span class="btn_right">
          <el-button size="small">
            <el-icon style="margin-right: 2px; margin-bottom: 2px"
              ><RefreshRight /></el-icon
            >刷新
          </el-button>
        </span>
      </div>
    </div>
    <el-table
      max-height="450"
      stripe
      border
      size="small"
      :data="this.tableData"
      :cell-class-name="tableCellClassName"
      @cell-click="cellClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="50" />
      <el-table-column align="center" label="信控类型">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <selectDown
              v-model:modelData="scope.row.InfoControlType"
              placeholder="请输入后搜索"
              urlType="currency"
            >
            </selectDown>
          </div>
          <span v-else>
            {{ scope.row.InfoControlType }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="结算类型">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input v-model="scope.row.settleType" size="small" clearable>
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.settleType }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="信用额度">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input v-model="scope.row.creditLimit" size="small" clearable>
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.creditLimit }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="信用临界点">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input
              v-model="scope.row.creditThreshold"
              size="small"
              clearable
            >
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.creditThreshold }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="超期处理方式">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input v-model="scope.row.overTimeMethod" size="small" clearable>
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.overTimeMethod }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="超额处理方式">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
          >
            <el-input
              v-model="scope.row.overMethod"
              size="small"
              clearable
            ></el-input>
          </div>
          <span v-else>
            {{ scope.row.overMethod }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建信控信息 -->
    <el-dialog
      title="信控信息"
      custom-class="LinkInfo"
      v-model="dialogData.show"
      width="448px"
    >
      <el-form
        :model="formData"
        label-suffix=":"
        :rules="formRules"
        label-width="90px"
        ref="form"
      >
        <el-row>
          <el-col>
            <el-form-item label="信控类型" prop="radio">
              <el-radio-group v-model="formData.radio">
                <el-radio :value="0">收款</el-radio>
                <el-radio :value="1">付款</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="结算类型" prop="settleType">
              <el-select
                v-model="formData.settleType"
                placeholder="请选择"
                size="small"
                fit-input-width
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4">
          <el-col :span="12">
            <el-form-item label="信用额度" prop="creditLimit">
              <el-select
                v-model="formData.creditLimit"
                placeholder="请选择"
                size="small"
                fit-input-width
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="input"
              fit-input-width
              placeholder="请输入"
              prop="creditThreshold"
            />
          </el-col>
        </el-row>
        <el-row :gutter="4">
          <el-col :span="12">
            <el-form-item label="信用临界点">
              <el-select
                v-model="formData.creditThreshold"
                placeholder="请选择"
                size="small"
                disabled
                fit-input-width
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="formData.creditThreshold"
              fit-input-width
              placeholder="请输入"
            />
          </el-col>
        </el-row>
        <el-row :gutter="4">
          <el-col :span="12">
            <el-form-item label="超额处理方式" prop="">
              <el-select
                v-model="formData.overMethod"
                placeholder="请选择"
                size="small"
                fit-input-width
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="input2"
              style="max-width: 600px"
              placeholder="请输入"
            >
              <template #append>天</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="4">
          <el-col :span="12">
            <el-form-item label="超期处理方式">
              <el-select
                v-model="formData.overTimeMethod"
                placeholder="请选择"
                size="small"
                fit-input-width
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="input2"
              style="max-width: 600px"
              placeholder="请输入"
            >
              <template #append>天</template>
            </el-input>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDiag" type="default" size="small"
            >取消</el-button
          >
          <el-button
            type="primary"
            size="small"
            style="background: #5d9df5"
            @click="next"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import selectDown from "./selectDown.vue";
import dayjs from "dayjs";
export default defineComponent({
  components: {
    AppPageTable,
    selectDown,
  },
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    let handleConfirmMobile = (rule, value, callback) => {
      const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
      if (value == "" || value == undefined || value == null) {
        callback();
      } else {
        if (!reg.test(value) && value != "") {
          callback(new Error("请输入正确的手机号码"));
        } else {
          callback();
        }
      }
    };
    let handleConfirmEmail = (rule, value, callback) => {
      const reg =
        /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
      if (value == "" || value == undefined || value == null) {
        callback();
      } else {
        if (!reg.test(value) && value != "") {
          callback(new Error("请输入正确的邮箱地址"));
        } else {
          callback();
        }
      }
    };
    let handleConfirmTel = (rule, value, callback) => {
      const reg = /0\d{2,3}-\d{7,8}/; //座机和传真格式是一样的：区号-号码
      if (value == "" || value == undefined || value == null) {
        callback();
      } else {
        if (!reg.test(value) && value != "") {
          callback(new Error("请输入正确的号码：区号-号码"));
        } else {
          callback();
        }
      }
    };
    return {
      tableData: {
        data: [],
        option: useTableOption(),
      },
      tableData: [
        {
          id: 1,
          // 信控类型
          InfoControlType: "收款",
          // 结算类型
          settleType: "月结",
          // 信用额度
          creditLimit: "CNY，1234",
          // 信用临界点
          creditThreshold: "CNY，1234",
          // 超期处理方式
          overTimeMethod: "提醒，1天",
          // 超额处理方式
          overMethod: "提醒，1天",
        },
        {
          id: 2,
          // 信控类型
          InfoControlType: "收款",
          // 结算类型
          settleType: "月结",
          // 信用额度
          creditLimit: "CNY，1234",
          // 信用临界点
          creditThreshold: "CNY，1234",
          // 超期处理方式
          overTimeMethod: "提醒，1天",
          // 超额处理方式
          overMethod: "提醒，1天",
        },
      ],
      formData: {
        // 信控类型
        InfoControlType: "",
        radio: -1,
        // 结算类型
        settleType: "",
        // 信用额度
        creditLimit: "CNY",
        // 信用临界点
        creditThreshold: "CNY",
        // 超期处理方式
        overTimeMethod: "提醒",
        // 超额处理方式
        overMethod: "提醒",
      },
      formRules: {
        radio: [{ required: true, message: "请选择信控类型", trigger: "blur" }],
        settleType: [
          { required: true, message: "请选择结算类型", trigger: "blur" },
        ],
      },
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引
      dialogData: {
        show: false,
        title: "",
        btnLoading: false,
      },
      newLinkBtnLoading: false,
      updateLinkBtnLoading: false,
      ywyOption: [],
    };
  },
  methods: {
    parseDate(date) {
      if (date) {
        return dayjs(date).format("YYYY-MM-DD");
      } else {
        return "";
      }
    },
    newData() {
      this.dialogData.show = true;
      // console.log('新增',this.dialogData.show);
    },
    async closeDiag() {
      // console.log('新增',this.dialogData.show);
      await this.$refs.form.clearValidate();
      this.dialogData.show = false;
    },
    async next() {
      await this.$refs.form.validate();
      this.dialogData.show = false;
    },
    cellClick(row, column, cell, event) {
      this.rowIndex = row.index;
      this.columnIndex = column.index;
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      column.index = columnIndex;
      row.index = rowIndex;
    },
  },
  watch: {
    // "dialogData.show"(newVal) {
    //   if (!newVal) {
    //     this.formData = {
    //       id: null,
    //       entId: null,
    //       linkCode: null,
    //       linkName: null,
    //       entCode: null,
    //       entFullname: null,
    //       salesId: null,
    //       sexes: null,
    //       tel: null,
    //       fax: null,
    //       email: null,
    //       ccMail: null,
    //       mobile: null,
    //       departmentName: null,
    //       positionName: null,
    //       birthday: null,
    //       isMain: 0,
    //       memo: null,
    //     };
    //     this.$nextTick(() => {});
    //   }
    // },
  },
  mounted() {},
});
</script>

<style lang="scss" scoped>
.middle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    border-left: 2px solid #5d9df5;
    padding-left: 4px;
    font-size: 16px;
    font-weight: 600;
  }
}
.operate_btn {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}
::v-deep .el-input-group__append {
  width: 25px;
}

::v-deep .el-dialog {
  padding: 0 !important;
}
::v-deep .el-dialog__title {
  margin: 8px 0px 0px 16px;
}
::v-deep .el-form {
  width: 400px;
}
::v-deep .el-dialog__header {
  display: flex;
  align-items: center;
  height: 36px;
  border-bottom: 1px solid #dee1e6;
}
::v-deep .el-dialog__footer {
  height: 40px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #dee1e6;
}
::v-deep .dialog-footer {
  height: 24px;
  margin-top: -8px;
}
::v-deep .el-form-item__content {
  height: 24px;
}
::v-deep .el-radio__label {
  margin-right: -19px;
}
::v-deep .el-dialog__body {
  padding-bottom: 0;
}
</style>
